<template>
  <view class="container">
    <view class="u-page">
      <!-- 页面内容 -->
    </view>
    <u-tabbar
      v-model="currentTabbar"
      :list="tabbarList"
      :mid-button="true"
      :before-switch="beforeSwitch"
      @click="handleReleaseClick"
    ></u-tabbar>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useGlobalStore } from '../store'

const globalStore = useGlobalStore()
const router = useRouter()

const currentTabbar = ref(0) // v-model绑定当前激活的tabbar项
const tabbarList = ref([
  {
    iconPath: 'home',
    selectedIconPath: 'home-fill',
    text: '首页',
    pagePath: '/pages/index/index',
  },
  {
    iconPath: 'plus',
    selectedIconPath: 'arrow-down',
    text: '发布',
    midButton: true,
    pagePath: '/pages/release/release',
  },
  {
    iconPath: 'account',
    selectedIconPath: 'account-fill',
    text: '我的',
    pagePath: '/pages/mine/mine',
  },
])

// 现在这个方法可能不再需要，除非其他Tab需要特殊处理
const beforeSwitch = (index) => {
  // 切换到其他Tab页面
  const path = tabbarList.value[index].pagePath
  uni.switchTab({ url: path })
  return true // 允许切换
}

const handleReleaseClick = () => {
  // 不再使用globalStore.releaseShowIf来判断是否显示发布视图
  // 直接跳转到发布页面
  uni.navigateTo({ url: '/pages/release/release' })
}

watch(
  () => globalStore.releaseShowIf,
  (newVal) => {
    // 根据发布状态调整中间按钮图标
    tabbarList.value[1].iconPath = newVal ? 'arrow-down' : 'plus'
  },
)
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 全屏高度 */
}

.u-page {
  flex: 1; /* 占满剩余空间 */
  overflow: auto; /* 内容过长时可滚动 */
  padding-bottom: 100rpx; /* 避免内容被tabbar遮挡 */
}

/* 根据需要添加更多样式 */
</style>
